<!--
针对sellerpage 这条路径而显示出来的
在这个组件中，通过组件注册的方式，要显示出Seller.vue这个组件
-->
<template>
  <div class="com-container">
    <div class="com-chart" ref="gender_ref"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    // 在页面加载完成的时候，主动进行屏幕的适配
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 初始化echartInstance对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.gender_ref);
      // 对图表初始化配置的控制

      var maxData = 7000;
      const initOption = {
        title: {
          text: "‖ 性别情况分析 ‖",
          left: "center",
          top: "5%",
          textStyle: {
            color: "white",
            fontFamily: "sans-serif",
          },
        },
        tooltip: {},
        xAxis: {
          max: maxData,
          splitLine: { show: false },
          offset: 10,
          axisLine: {
            lineStyle: {
              color: "#999",
            },
          },
          axisLabel: {
            margin: 15,
          },
        },
        yAxis: {
          data: ["男性", "女性"],
          inverse: true,
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            margin: 10,
            color: "#ccc",
            fontSize: 16,
          },
        },
        grid: {
          top: "center",
          height: 80,
          left: "20%",
          right: "20%",
        },
      };
      this.chartInstance.setOption(initOption);
    },
    // 获取服务器的数据
    async getData() {
      // 获取服务器的数据，对this.allData进行赋值之后，调用updateChart方法更新图表
      //   const that = this;
      //   await this.$http.get("age/" + that.$store.state.single_sta).then(
      //     function (response) {
      //       // console.log(response.data,"that.$store.state.single_sta is:",that.$store.state.single_sta);
      //       that.allData = response.data;
      //     },
      //     function (err) {
      //       console.log(err);
      //     }
      //   );
      console.log("Gender's data :", this.$store.state.male_number);
      this.updateChart();
    },
    // 更新图表
    updateChart() {
      var maxData = 7000;
      const spirit =
        "image://";
      const that = this;
      const dataOption = {
        series: [
          {
            // current data
            type: "pictorialBar",
            symbol: spirit,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbolClip: true,
            symbolSize: 20,
            symbolBoundingData: maxData,
            data: [
              that.$store.state.male_number,
              that.$store.state.female_number,
            ],
            markLine: {
              symbol: "none",
              label: {
                formatter: "max: {c}",
                position: "start",
              },
              lineStyle: {
                color: "white",
                type: "dotted",
                opacity: 0.4,
                width: 2,
              },
              data: [
                {
                  type: "max",
                },
              ],
            },
          },
          {
            // full data
            type: "pictorialBar",
            itemStyle: {
              opacity: 0.2,
            },
            label: {
              show: true,

              position: "right",
              offset: [10, 0],
              color: "white",
              fontSize: 18,
            },
            animationDuration: 0,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbol: spirit,
            symbolSize: 20,
            symbolBoundingData: maxData,
            data: [
              that.$store.state.male_number,
              that.$store.state.female_number,
            ],
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
    // startInterval () {},
    screenAdapter() {
      const adapterOption = {};
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
  },
  watch: {
    "$store.state.query_age": {
      deep: true,
      handler() {
        // console.log("Age chart's station has been changed,now this.$store.state.query_age is:",this.$store.state.query_age)
        this.allData = this.$store.state.query_age;
        //  console.log("Age chart's station has been changed,now new allData is:",this.allData)
        this.initChart();
        this.updateChart();
      },
    },
  },
};
</script>
<style lang="less" scoped>
</style>
